<template>
  <div>
    <div class="window row-center">
      <div class="content">
        <div class="topContain">
          <div class="joinMeeting contain">
            <div class="title">
              <span class="icon iconfont icon-join"></span>
              <span>加入会议</span>
            </div>
            <div class="inputBox">
              <el-input
                placeholder="请输入会议ID"
                v-model="meetingNumber"
                clearable
                @input="setNum"
              ></el-input>
              <ripple-button
                type="primary"
                :loading="joinLoading"
                icon="el-icon-plus"
                @click="handleJoin"
              >加入</ripple-button>
            </div>
          </div>
          <div class="meetingDialog row-center contain">
            <ripple-button
              type="primary"
              icon="el-icon-date"
              @click="handleCreateConferenceClick"
            >安排会议</ripple-button>
          </div>
        </div>
        <div
          class="todayMeeting contain columnDirection"
          v-loading="meetingLoading"
        >
          <div class="list-header">
            <div class="title">
              <span class="icon iconfont icon-message"></span>
              <span>今日会议</span>
            </div>
            <div>
              <div
                class="list-all"
                @click="handleTodayConferences"
              >
                <i class="el-icon-refresh icon-refresh"></i>
                <span>刷新</span>
              </div>
            </div>
          </div>
          <div
            class="row-center tmContain columnDirection"
            v-if="noMeetingTip"
          >
            <div class="tmImg">
              <img src="/images/today.png" />
            </div>
            <div class="buttonTip rowDirection">
              暂无会议安排，
              <a @click="handleCreateConferenceClick">立刻安排</a>
            </div>
          </div>
          <div v-else>
            <el-table
              :data="todayMeeting"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="conferenceBase.estimatedStartTime"
                label="会议时间"
              ></el-table-column>
              <el-table-column
                prop="conferenceBase.title"
                label="会议名称"
              ></el-table-column>
              <el-table-column
                prop="members[0].userName"
                label="主持人"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    v-if="defaultCondition(scope.row)===1"
                    type="primary"
                    plain
                    size="mini"
                    @click="handleStartConference(scope.row.conferenceBase.cid)"
                  >开启会议</el-button>
                  <el-button
                    v-else-if="defaultCondition(scope.row)===2"
                    type="primary"
                    plain
                    size="mini"
                    @click="handleJoinConference(scope.row.conferenceBase.cid)"
                  >加入会议</el-button>
                  <el-button
                    v-else
                    type="primary"
                    plain
                    size="mini"
                    disabled
                  >暂未开始</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="all">
              <router-link to="/meetinglist">
                <span>
                  显示全部
                  <i class="el-icon-arrow-right"></i><i class="el-icon-arrow-right"></i>
                </span>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <form-dialog
      title="安排会议"
      :visible.sync="createConferenceDialogVisible"
      width="750px"
    >
      <create-meeting-form
        @submit="handleCreateMeetingSubmit"
        @cancel="handleCreateMeetingCancel"
      />
    </form-dialog>
    <form-dialog
      title="该会议为私密会议，请输入密码"
      :visible.sync="joinMeetingDialogVisible"
    >
      <password-form
        :meetingId="meetingId"
        @join="handleSingleJoin"
      />
    </form-dialog> -->
    <el-dialog
      :visible.sync="createConferenceDialogVisible"
      width="750px"
    >
      <dialog-self title="安排会议">
        <div class="dialog-box">
          <create-meeting-form
            ref="createMeetingRef"
            @submit="handleCreateMeetingSubmit"
            @cancel="handleCreateMeetingCancel"
          />
        </div>
      </dialog-self>
    </el-dialog>
  </div>
</template>

<script>
import CreateMeetingForm from './form/CreateMeetingForm'
// import PasswordForm from './form/PasswordForm'
import { todayConferences } from '@/api/conferences'
import join from '@/mixin/join'
export default {
  name: 'MeetingNow',
  mixins: [join],
  data () {
    return {
      // 今日会议列表
      todayMeeting: [],
      // 创建会议弹窗
      createConferenceDialogVisible: false,
      meetingLoading: false,
      noMeetingTip: false
    }
  },
  components: {
    CreateMeetingForm
    // PasswordForm
  },
  mounted () {
    this.handleTodayConferences()
  },
  methods: {
    // 点击创建会议按钮
    async handleCreateConferenceClick () {
      this.createConferenceDialogVisible = true
      await this.$nextTick()
      this.$refs.createMeetingRef.reset()
    },
    // 创建会议提交
    handleCreateMeetingSubmit () {
      this.createConferenceDialogVisible = false
      this.handleTodayConferences()
    },
    // 创建会议取消
    handleCreateMeetingCancel () {
      this.createConferenceDialogVisible = false
    },
    // 打开开会房间
    openMeetingRoom (meetingId) {
      const { href } = this.$router.resolve({
        name: 'MeetingRoom',
        query: { conferenceId: meetingId }
      })
      window.open(href, '_blank')
    },
    // 获取今日会议
    async handleTodayConferences () {
      this.meetingLoading = true
      const { data: { conferenceNum, conferenceDetailList } } = await todayConferences()
      if (conferenceNum === 0) {
        this.meetingLoading = false
        this.noMeetingTip = true
      } else {
        this.todayMeeting = conferenceDetailList
        this.meetingLoading = false
        this.noMeetingTip = false
      }
    },
    // 判断状态
    defaultCondition (row) {
      const { founderId, status } = row.conferenceBase
      if (status === 1) {
        if (founderId + '' === this.userInfo.userId) {
          return 1
        } else {
          return 3
        }
      } else {
        return 2
      }
    },
    // 加入会议
    handleJoinConference (cid) {
      this.openMeetingRoom(cid)
    }
  }
}
</script>

<style scoped lang="scss">
$bg-color: #f5f6f8;
$bg-in-color: #ffffff;
$button-color: #2953ff;
.row-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  .icon {
    color: #2953ff;
    font-size: 25px;
    margin-right: 5px;
  }
}
.contain {
  background-color: $bg-in-color;
  padding: 20px;
  margin: 15px;
  border-radius: 5px;
}
a {
  color: #000000;
}
.rowDirection {
  display: flex;
  flex-direction: row;
}
.columnDirection {
  display: flex;
  flex-direction: column;
}
.window {
  width: 100%;
  background-color: $bg-color;
  margin-bottom: 20px;
  .content {
    width: $global_width;
    background-color: $bg-color;
    display: flex;
    flex-direction: column;
    .topContain {
      display: flex;
      flex-direction: row;
      .joinMeeting {
        display: flex;
        flex: 2;
        flex-direction: column;
        .inputBox {
          margin: 50px 0;
          display: flex;
          align-items: center;
        }
        ::v-deep .el-input {
          width: 300px;
          margin-right: 10px;
        }
      }
      .meetingDialog {
        display: flex;
        flex: 1;
      }
    }
    .todayMeeting {
      .all {
        margin-top: 20px;
        text-align: center;
        font-size: 14px;
        color: #9199a1;
        line-height: 18px;
        cursor: pointer;
      }
      .allMeeting {
        margin-left: 80%;
        .iconBox {
          height: 20px;
          width: 20px;
        }
      }
      .tmContain {
        margin: 50px;
        .tmImg {
          width: 300px;
          height: 300px;
          margin-bottom: 20px;
          img {
            height: 100%;
            width: 100%;
          }
        }
        .buttonTip {
          a {
            color: $button-color;
            cursor: pointer;
          }
        }
      }
      .el-table {
        margin: 30px 10px;
        ::v-deep tr {
          height: 60px;
        }
        ::v-deep .cell {
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
.list-header {
  display: flex;
  justify-content: space-between;
  .list-all {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $blue;
    .all-icon {
      width: 25px;
      height: 25px;
      margin-left: 5px;
    }
  }
}
.dialog-box {
  padding: 20px 30px 20px;
}
.icon-refresh {
  margin-right: 5px;
}
</style>
